<template>
	<div class="publicformview">
		<el-form :rules='rules' label-width='100px' :inline="true" :disabled='blockType==3' :model="listQuery" size="mini"
			ref="addForm" style="margin-top: 20px;">
			<el-row :gutter="24">
				<el-col :span="6">
					<el-form-item label="所号：" prop="blockno">
						<el-select v-model="listQuery.blockno" @change='blockChange' value-key="blockno">
							<div v-for="(item,index) in blList" :key="index">
								<el-option :label="item.blockno" :value="item" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="编号：" prop="roomid">
						<el-input v-model="listQuery.roomid"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="建档单位：" prop="creatingdept">
						<!-- 	<el-select v-model="listQuery.creatingdept">
							<div v-for="(item,index) in bumenList" :key="index">
								<el-option disabled :label="item.aname" :value="item.aname" :key="index"></el-option>
							</div>
						</el-select> -->
						<el-input disabled v-model="listQuery.creatingdept"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="启始日期：" prop="startdate">
						<el-date-picker v-model="listQuery.startdate" type="date" placeholder="年/月/日">
						</el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="门号：" prop="buildingdoorno">
						<el-input v-model="listQuery.buildingdoorno"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="楼层：" prop="floorno">
						<el-input v-model="listQuery.floorno"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="性质：" prop="livingway">
						<el-select v-model="listQuery.livingway" @change='xinzhiChange'>
							<div v-for="(item,index) in xingzhiList" :key="index">
								<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="启始原因：" prop="startcause">
						<el-select v-model="listQuery.startcause">
							<div v-for="(item,index) in qishiyuanyingList" :key="index">
								<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="单元：" prop="apartmentno">
						<el-input v-model="listQuery.apartmentno"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="间号：" prop="roomno">
						<el-input v-model="listQuery.roomno"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="计租间：" prop="rentflag">
						<el-select v-model="listQuery.rentflag">
							<el-option label="是" :value="1" key="1"></el-option>
							<el-option label="否" :value="0" key="0"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="自然间：" prop="roomflag">
						<el-select v-model="listQuery.roomflag">
							<el-option label="是" :value="1" key="1"></el-option>
							<el-option label="否" :value="0" key="0"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="用途：" prop="use">
						<el-select v-model="listQuery.use">
							<div v-for="(item,index) in yongtuList" :key="index">
								<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col> 
				<span v-if="blockType==3||blockType==2">
					<el-col :span="6">
						<el-form-item label="终止日期：" prop="stopdate">
							<el-date-picker v-model="listQuery.stopdate" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-col>
					
					<el-col :span="6">
						<el-form-item label="终止原因：" prop="stopcause">
							<el-select v-model="listQuery.stopcause">
								<div v-for="(item,index) in zhongzhiyuanyingList" :key="index">
									<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
								</div>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="变动日期：" prop="changedate">
							<el-date-picker v-model="listQuery.changedate" type="date" placeholder="年/月/日">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="变动原因：" prop="changetype">
							<el-input v-model="listQuery.changetype"></el-input>
						</el-form-item>
					</el-col>
				</span>
				<el-col :span="6">
					<el-form-item label="长*宽(米)：" prop="lenthWidth">
						<el-input v-model="listQuery.lenthWidth"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="建筑面积：" prop="buildingarea">
						<el-input v-model="listQuery.buildingarea"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="计租面积：" prop="rentarea">
						<el-input v-model="listQuery.rentarea"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="使用面积：" prop="usingarea">
						<el-input v-model="listQuery.usingarea"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="原值：" prop="oldvalue">
						<el-input disabled v-model="listQuery.oldvalue"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="现值：" prop="nowvalue">
						<el-input disabled v-model="listQuery.nowvalue"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="类别：" prop="usetype">
						<el-select v-model="listQuery.usetype">
							<div v-for="(item,index) in leibieList" :key="index">
								<el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="备注：" prop="roommemo1">
						<el-input v-model="listQuery.roommemo1"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="bottomTop" v-if="blockType!=3">
			<el-button type="primary" size="mini" @click="handleAddUser">保存</el-button>
		</div>
	</div>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		houseAdminList,
		addRoom,
		roomDetails,
		updRoom,
		blockList,
		blockDetail
	} from '@/api/industry'
	export default {
		props: {
			blockType: String,
			roomid: String
		},
		name: 'canquanqingkuang',
		data() {
			return {
				listQuery: {
					blockno: '',
					roomid: '',
					creatingdept: '',
					startdate: '',
					buildingdoorno: '',
					floorno: '',
					livingway: '',
					startcause: '',
					apartmentno: '',
					rentflag: '',
					usetype: '',
					stopdate: '',
					roomno: '',
					roomflag: '',
					stopcause: '',
					changedate: '',
					changetype: '',
					lenthWidth: '',
					buildingarea: '',
					rentarea: '',
					usingarea: '',
					oldvalue: '',
					nowvalue: '',
					use: '',
					roommemo1: ''
				},
				rules: {
					buildingarea: [{
						required: true,
						message: '请输入建筑面积',
						trigger: 'blur'
					}],
					rentarea: [{
						required: true,
						message: '请输入计租面积',
						trigger: 'blur'
					}],
					usingarea: [{
						required: true,
						message: '请输入使用面积',
						trigger: 'blur'
					}],
					blockno: [{
						required: true,
						message: '请输入所号',
						trigger: 'blur'
					}],
					roomid: [{
						required: true,
						message: '请输入编号',
						trigger: 'blur'
					}],
					creatingdept: [{
						required: true,
						message: '请选择建档单位',
						trigger: 'blur'
					}]
				},
				total: 0,
				options: [{
					key: '1'
				}],
				listLoading: false,
				dialogVisible: false,
				isChanquan: true,
				type: 1,
				// 部门列表
				bumenList: [],
				// 性质
				xingzhiList: [],
				chanyeList: [],
				blList: [],
				qishiyuanyingList: [],
				yongtuList: [],
				zhongzhiyuanyingList: [],
				leibieList: [],
				blockid: ''
			}
		},
		computed: {},

		mounted() {
			// 遍历字典
			this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
			this.chanyeList.forEach((item, index) => {
				if (item.classname == '地段等级') {
					this.xingzhiList = item.classmidList
				} else if (item.classname == '房间资料起始原因') {
					this.qishiyuanyingList = item.classmidList
				} else if (item.classname == '房间资料用途') {
					this.yongtuList = item.classmidList
				} else if (item.classname == '房间资料终止原因') {
					this.zhongzhiyuanyingList = item.classmidList
				} else if (item.classname == '住宅') {
					this.leibieList = item.classmidList
				}
			})

			if (this.roomid) {
				let data = {
					RoomID: this.roomid
				}
				roomDetails(data).then((res) => {
					this.listQuery = res.data
					this.xinzhiChange(res.data.livingway)

					let data = {
						limit: 99999,
						page: 1
					}
					blockList(data).then((res) => {
						res.data.list.forEach((item, index) => {
							if (item.blockno == this.listQuery.blockno) {
								let data = {
									BlockID: item.blockid
								}
								blockDetail(data).then((res) => {
									this.listQuery.creatingdept = res.data.creatingdept
									this.$forceUpdate()
								})
							}
						})
					})
				})
			}
			this.houseAdminList()
			this.blockList()
			if (localStorage.getItem('jibenxinxi')) {
				this.listQuery = JSON.parse(localStorage.getItem('jibenxinxi'))
				this.xinzhiChange(this.listQuery.livingway)
			}
		},

		methods: {
			xinzhiChange(e) {
				this.$emit('xinzhi', e)
			},
			blockList() {
				let data = {
					limit: 99999,
					page: 1
				}
				blockList(data).then((res) => {
					this.blList = res.data.list
				})
			},
			// 部门列表
			houseAdminList() {
				let data = {
					AName: '',
					DID: '',
					pageSize: 9999,
					pageNum: ''
				}
				this.listLoading = true
				houseAdminList(data).then((res) => {
					this.bumenList = res.data.list
					this.listLoading = false
				})
			},
			resetForm(val) {
				this.$refs[val].resetFields()
			},
			handleAddUser() {
				this.$refs.addForm.validate((valid) => {
					if (valid) {
						let data = {
							blockno: this.listQuery.blockno,
							roomid: this.listQuery.roomid,
							creatingdept: this.listQuery.creatingdept,
							startdate: this.listQuery.startdate ?
								dayjs(this.listQuery.startdate).format('YYYY-MM-DD HH:mm:ss') :
								'',
							buildingdoorno: this.listQuery.buildingdoorno,
							floorno: this.listQuery.floorno,
							livingway: this.listQuery.livingway,
							startcause: this.listQuery.startcause,
							apartmentno: this.listQuery.apartmentno,
							rentflag: this.listQuery.rentflag,
							usetype: this.listQuery.usetype,
							stopdate: this.listQuery.stopdate ?
								dayjs(this.listQuery.stopdate).format('YYYY-MM-DD HH:mm:ss') :
								'',
							roomno: this.listQuery.roomno,
							roomflag: this.listQuery.roomflag,
							stopcause: this.listQuery.stopcause,
							changedate: this.listQuery.changedate ?
								dayjs(this.listQuery.changedate).format('YYYY-MM-DD HH:mm:ss') :
								'',
							changetype: this.listQuery.changetype,
							lenthWidth: this.listQuery.lenthWidth,
							buildingarea: this.listQuery.buildingarea,
							rentarea: this.listQuery.rentarea,
							usingarea: this.listQuery.usingarea,
							oldvalue: this.listQuery.oldvalue,
							nowvalue: this.listQuery.nowvalue,
							use: this.listQuery.use,
							usetype: this.listQuery.usetype,
							roommemo1: this.listQuery.roommemo1,
							roomid: this.roomid ? this.roomid : -1
						}
						if (this.blockType == 2) {
							updRoom(data).then((res) => {
								this.$message(res.message)
								localStorage.setItem('roomid', this.roomid)
							})
						} else {
							addRoom(data).then((res) => {
								this.$message(res.message)
								localStorage.setItem('roomid', res.data.roomid)
							})
						}
					} else {
						return false
					}
				})
			},
			returns() {
				this.$router.go(-1)
			},
			// 选择类型
			selectButton(type) {
				this.type = type
			},
			blockChange(e) {
				this.blockid = e.blockid
				this.listQuery.blockno = e.blockno

				let data = {
					BlockID: this.blockid
				}
				blockDetail(data).then((res) => {
					this.listQuery.creatingdept = res.data.creatingdept
				})
			}
		},
		beforeDestroy() {
			let data = {
				blockno: this.listQuery.blockno,
				roomid: this.listQuery.roomid,
				creatingdept: this.listQuery.creatingdept,
				startdate: this.listQuery.startdate ?
					dayjs(this.listQuery.startdate).format('YYYY-MM-DD HH:mm:ss') :
					'',
				buildingdoorno: this.listQuery.buildingdoorno,
				floorno: this.listQuery.floorno,
				livingway: this.listQuery.livingway,
				startcause: this.listQuery.startcause,
				apartmentno: this.listQuery.apartmentno,
				rentflag: this.listQuery.rentflag,
				usetype: this.listQuery.usetype,
				stopdate: this.listQuery.stopdate ?
					dayjs(this.listQuery.stopdate).format('YYYY-MM-DD HH:mm:ss') :
					'',
				roomno: this.listQuery.roomno,
				roomflag: this.listQuery.roomflag,
				stopcause: this.listQuery.stopcause,
				changedate: this.listQuery.changedate ?
					dayjs(this.listQuery.changedate).format('YYYY-MM-DD HH:mm:ss') :
					'',
				changetype: this.listQuery.changetype,
				lenthWidth: this.listQuery.lenthWidth,
				buildingarea: this.listQuery.buildingarea,
				rentarea: this.listQuery.rentarea,
				usingarea: this.listQuery.usingarea,
				oldvalue: this.listQuery.oldvalue,
				nowvalue: this.listQuery.nowvalue,
				use: this.listQuery.use,
				usetype: this.listQuery.usetype,
				roommemo1: this.listQuery.roommemo1
			}
			localStorage.setItem('jibenxinxi', JSON.stringify(data))
		}
	}
</script>

<style scoped>
	.headTop {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.xinxi {
			display: flex;
			width: 800px;
		}
	}

	.el-form-item {
		justify-content: start !important;
	}

	.el-select {
		width: 180px;
	}

	.el-input {
		width: 180px;
	}

	.el-date-picker {
		width: 180px;
	}

	.bottomTop {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.tabButton {
		background: #eff2f7;
		color: #333333;
		border: none;
	}
</style>